<template>
  <view class="floating-music-player" v-if="visible">
    <view class="music-player-container">
      <view class="music-player-cover" @click="togglePlayback">
        <image
          class="cover-image"
          :src="musicInfo.coverURL"
          :class="{ rotating: isPlaying }"
          mode="aspectFill"
        />
        <view class="play-pause-icon">
          <FeatherIcon v-if="isPlaying" name="pause" size="20" color="#fff" />
          <FeatherIcon v-else name="play" size="20" color="#fff" />
        </view>
      </view>
      <view class="music-player-info">
        <text class="music-name">{{ musicInfo.title }}</text>
      </view>
      <view class="music-player-controls">
        <view class="control-btn close-btn" @click="closePlayer">
          <FeatherIcon name="x" size="20" color="#fff" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import FeatherIcon from "@/components/FeatherIcon.vue";

const props = defineProps({
  initialVisible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:visible"]);

// 播放器状态
const visible = ref(props.initialVisible);
const isPlaying = ref(false);
const musicInfo = ref({
  id: "",
  title: "音乐分享",
  coverURL: "https://file.fishpi.cn/default-music-cover.png",
  source: "",
});

// 音频上下文引用
let audioContext = null;

// 创建音频上下文
const createAudioContext = () => {
  // 创建内部音频上下文
  audioContext = uni.createInnerAudioContext();

  // 设置事件监听
  audioContext.onEnded(() => {
    handleMusicEnded();
  });

  audioContext.onError((res) => {
    console.error("音频播放错误", res);
    handleMusicError();
  });
};

// 播放音乐
const playMusic = (music) => {
  // 更新音乐信息
  musicInfo.value = {
    id: music.id,
    title: music.title,
    coverURL: music.coverURL,
    source: music.source,
  };

  // 显示播放器
  visible.value = true;
  emit("update:visible", true);

  // 设置音频源
  if (audioContext) {
    audioContext.stop();
    audioContext.src = music.source;
    audioContext.play();
    isPlaying.value = true;
  } else {
    createAudioContext();
    audioContext.src = music.source;
    audioContext.play();
    isPlaying.value = true;
  }
};

// 切换播放/暂停
const togglePlayback = () => {
  if (!audioContext) {
    createAudioContext();
    audioContext.src = musicInfo.value.source;
  }

  if (isPlaying.value) {
    audioContext.pause();
    isPlaying.value = false;
  } else {
    audioContext.play();
    isPlaying.value = true;

    // 监听播放失败
    audioContext.onError(() => {
      console.error("播放音乐失败");
      isPlaying.value = false;
      uni.showToast({
        title: "播放失败，请重试",
        icon: "none",
      });
    });
  }
};

// 关闭音乐播放器
const closePlayer = () => {
  if (audioContext) {
    audioContext.stop();
  }
  isPlaying.value = false;
  visible.value = false;
  emit("update:visible", false);
};

// 处理音乐播放结束
const handleMusicEnded = () => {
  isPlaying.value = false;
};

// 处理音乐播放错误
const handleMusicError = () => {
  isPlaying.value = false;
  uni.showToast({
    title: "音乐播放失败",
    icon: "none",
  });
};

// 组件挂载时创建音频上下文
onMounted(() => {
  createAudioContext();
});

// 组件销毁前清理
onUnmounted(() => {
  if (audioContext) {
    audioContext.destroy();
    audioContext = null;
  }
});

// 暴露方法
defineExpose({
  playMusic,
  closePlayer,
});
</script>

<style lang="scss" scoped>
.floating-music-player {
  position: fixed;
  bottom: 200rpx;
  right: 30rpx;
  z-index: 1000;
  width: 120rpx;
  border-radius: 60rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2);
  overflow: visible;
}

.music-player-container {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-player-cover {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  overflow: hidden;
  position: relative;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cover-image.rotating {
  animation: rotate 8s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.play-pause-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-player-info {
  display: none;
}

.music-player-controls {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
}

.control-btn {
  width: 30rpx;
  height: 30rpx;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
